<template>
	<div class="use-explain">
		<div class="r-explain">
			<h1>卡使用规则</h1>
			<div class="rule">
				{{rules}}
			</div>
		</div> 
	</div>
</template>

<script>
	
	import useExplain from './use-explain';
	
	export default {
		components: {
			useExplain
		},
		data () {
			return {
				rules:localStorage.thisCardRules
			}
		},
		route: {
	        data: function() {
	        	console.log(this.rules);
	        	if(this.rules){

	        		if(this.rules == 'null'){

	        			this.rules = "暂无使用规则";

	        		}

	        	}else{

	        		this.rules = "暂无使用规则";

	        	}         
	        }
	    }
	}

	
</script>

<style lang="scss" scoped>
	@import '../../assets/css/_functions.scss';
	@import '../../assets/css/_variables.scss';

	.r-explain{
		background: $_fff;
		padding: rem(15) 0 rem(10);
		margin-top: rem(14);
	}
	.r-explain h1{
		font-size: rem(18);
		padding:0 0 rem(10) rem(15);
		border-bottom: 1px solid $_dedede;
		color:$_1f323e;
		margin-bottom: rem(10);   
	}
	.r-explain .rule{
		font-size: rem(14);
		padding: 0 rem(15);
		color: #8392a0;
		line-height: rem(26);		   
	}
	.r-explain .dot{
		width: rem(6);
		height: rem(6);
		background: #ccc;
		border-radius: 100%;
		display: inline-block;
		vertical-align: middle;
		margin-right: rem(8);  
	}
	.r-explain .rule p{
	   margin-bottom: rem(9);  
	} 

</style>